<template>
	<view class="device-order-form">
		<cs-card title="基本信息">
			<u--form labelPosition="left" :model="baseForm" ref="form1" labelWidth="80" :labelStyle="labelStyle">
				<u-form-item label="机房:" borderBottom @click="showRoom = true" ref="item1">
					<u--input v-model="baseForm.room" disabled disabledColor="#ffffff" placeholder="选择" border="none"
						inputAlign="right"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="使用院系:" borderBottom @click="showCollege = true" ref="item2">
					<u--input v-model="baseForm.college" disabled disabledColor="#ffffff" placeholder="选择" border="none"
						inputAlign="right"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="使用班级:" borderBottom @click="showClass = true" ref="item3">
					<u--input v-model="baseForm.class" disabled disabledColor="#ffffff" placeholder="选择" border="none"
						inputAlign="right"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="申请人:" ref="item4">
					<u--input v-model="baseForm.name" border="none" inputAlign="right"></u--input>
				</u-form-item>
			</u--form>
			<u-action-sheet :show="showRoom" :actions="roomList" title="请选择机房" @close="showRoom = false"
				@select="roomSelect">
			</u-action-sheet>
			<u-action-sheet :show="showCollege" :actions="collegeList" title="请选择院系" @close="showCollege = false"
				@select="collegeSelect">
			</u-action-sheet>
			<u-action-sheet :show="showClass" :actions="classList" title="请选择班级" @close="showClass = false"
				@select="classSelect">
			</u-action-sheet>
		</cs-card>
		<cs-card title="预约时间">
			<u--form labelPosition="left" :model="timeForm" ref="form2" labelWidth="80" :labelStyle="labelStyle">
				<u-form-item label="开始时间:" ref="item5" borderBottom @click="showStart = true">
					<u--input v-model="timeForm.startTime" border="none" disabled disabledColor="#ffffff"
						placeholder="选择" inputAlign="right">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="结束时间:" ref="item6" @click="showEnd = true">
					<u--input v-model="timeForm.endTime" border="none" disabled disabledColor="#ffffff" placeholder="选择"
						inputAlign="right">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</u--form>
			<u-datetime-picker ref="datetimePicker1" :show="showStart" v-model="timeValue1" mode="datetime"
				@cancel="showStart=false" @confirm="confirmStart">
			</u-datetime-picker>
			<u-datetime-picker ref="datetimePicker2" :show="showEnd" v-model="timeValue2" mode="datetime"
				@cancel="showEnd=false" @confirm="confirmEnd">
			</u-datetime-picker>
		</cs-card>
		<cs-card title="其他">
			<u--form labelPosition="top" :model="timeForm" ref="form3" :labelStyle="labelStyle">
				<u-form-item label="事由:" ref="item7" borderBottom>
					<u--textarea v-model="otherForm.action" placeholder="请输入内容"></u--textarea>
				</u-form-item>
			</u--form>
			<u--form labelPosition="top" :model="timeForm" ref="form3" :labelStyle="labelStyle">
				<u-form-item label="地点:" ref="item7" borderBottom>
					<u--textarea v-model="otherForm.address" placeholder="请输入内容"></u--textarea>
				</u-form-item>
			</u--form>
			<u--form labelPosition="top" :model="timeForm" ref="form3" :labelStyle="labelStyle">
				<u-form-item label="备注:" ref="item7">
					<u--textarea v-model="otherForm.remark" placeholder="请输入内容"></u--textarea>
				</u-form-item>
			</u--form>
		</cs-card>
		<u-button size="small" color="#377FEC" text="提交"></u-button>
	</view>
</template>

<script>
	import CsCard from "@/components/CsCard/CsCard.vue"
	import dateFormat from "@/utils/date-format.js"
	export default {
		components: {
			CsCard
		},
		data() {
			return {
				baseForm: {
					room: '',
					college: '',
					class: '',
					name: ''
				},
				timeForm: {
					startTime: '',
					endTime: ''
				},
				otherForm: {
					action: '',
					address: '',
					remark: ''
				},
				timeValue1: Number(new Date()),
				timeValue2: Number(new Date()),
				labelStyle: {
					color: '#999999'
				},
				showRoom: false,
				showCollege: false,
				showClass: false,
				showStart: false,
				showEnd: false,
				roomList: [{
						name: '机房1',
					},
					{
						name: '机房2',
					},
					{
						name: '机房3',
					},
				],
				collegeList: [{
						name: '工程学院',
					},
					{
						name: '农学院',
					},
					{
						name: '商学院',
					},
				],
				classList: [{
						name: '332班',
					},
					{
						name: '323班',
					},
					{
						name: '324班',
					},
				],

			}
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker1.setFormatter(this.formatter)
			this.$refs.datetimePicker2.setFormatter(this.formatter)
		},
		watch: {
			timeValue1(newVal) {
				this.timeForm.startTime = uni.$u.timeFormat(newVal, 'yyyy-mm-dd hh:MM:ss')
			},
			timeValue2(newVal) {
				this.timeForm.endTime = uni.$u.timeFormat(newVal, 'yyyy-mm-dd hh:MM:ss')
			}
		},
		methods: {
			roomSelect(e) {
				this.baseForm.room = e.name
			},
			collegeSelect(e) {
				this.baseForm.college = e.name
			},
			classSelect(e) {
				this.baseForm.class = e.name
			},
			confirmStart() {
				this.showStart = false
				if (this.timeForm.startTime === '') {
					this.timeForm.startTime = uni.$u.timeFormat(this.timeValue1, 'yyyy-mm-dd hh:MM:ss')
				}

			},
			confirmEnd() {
				this.showEnd = false
				if (this.timeForm.endTime === '') {
					this.timeForm.endTime = uni.$u.timeFormat(this.timeValue2, 'yyyy-mm-dd hh:MM:ss')
				}

			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},
		}
	}
</script>

<style lang="scss">
	.device-order-form {
		min-height: 100vh;
		background-color: #F6F6F6;
		padding: 20rpx 0;
	}

	.u-button {
		width: 196px !important;
		height: 36px;

		.u-button__text {
			font-size: 14px !important;
		}

	}
</style>
